<template>
    <main class="pie-dialog">
        <n-modal v-model:show="showModal" preset="dialog"
        :style="{width: dialogWidth, height: modalHeight}"
        :title="dialogTitle"
        :show-icon="false"
        :title-class="'modal-title'"
        :class="'dynamic-madal'"
        :on-close="handleNegativeClick">
            <BarLine v-if="isChart" :canvasHeight="360" :data="chartData" />
            <template #action>
                <n-button ghost color="#8a2be2" @click="handleNegativeClick">
                    <template #icon><n-icon><Close /></n-icon></template>
                    取消
                </n-button>
                <n-button color="#8a2be2" @click="handlePositiveClick">
                    <template #icon><n-icon><Checkmark /></n-icon></template>
                    确定
                </n-button>
            </template>
        </n-modal>
    </main>
</template>

<script setup lang="ts">
import { defineProps, ref, watch, computed, onMounted } from 'vue'
import BarLine from '../charts1/BarLine.vue'
import { Close, Checkmark } from '@vicons/ionicons5'

const emit = defineEmits(['dialogEvent'])
let props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    },
    dialogWidth: {
        type: String,
        default: '600px'
    },
    dialogHeight: {
        type: String,
        default: '300px'
    },
    dialogTitle: {
        type: String,
        default: "弹窗"
    },
    data: {
        type: Object,
        default: () => { } 
    }
    // title?: String
})
let showModal = ref(props.showModal)
let isChart = ref(false)
let chartData = ref({})
let modalHeight = computed(() => { return props.dialogHeight + '80px'})
onMounted(() => {
    console.log('=====', props.data)
})
watch(
  () => props.data,
  (newValue) => {
    console.log('=====', newValue)
    chartData.value = newValue.chartData
    isChart.value = true
  },
  { deep: true, immediate: true }
)

let handleNegativeClick = () => {
    let data = {
        type: "no",
        data: {}
    }
    isChart.value = false
    emit('dialogEvent', data)
}
let handlePositiveClick = () => {
    let data = {
        type: "sure",
        data: props.data
    }
    isChart.value = false
    emit('dialogEvent', data)
}
</script>

<style>
.dynamic-madal {
    background-color: #020e2b;
}
.dynamic-madal > .modal-title {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #d3d8c1;
    margin-bottom: 20px;
    color: #ffffff;
}

/* .dynamic-madal > .n-dialog .n-dialog__title, .modal-title {
    color: #ffffff;
} */
.dynamic-madal > .n-dialog.n-modal {    
    background-color: #020e2b;
}
.dynamic-madal > .n-dialog.n-dialog--bordered {
    border-color: #020e2b;
}
</style>
